<!--
 * @Descripttion: 
 * @version: 
 * @Author: wishchan
 * @Date: 2021-12-09 15:15:59
 * @LastEditors: 川杨
 * @LastEditTime: 2022-01-12 15:53:01
-->
<template>
  <div class="report-business">
    <!-- header -->
    <h3>{{headerText()}}</h3>
    <!-- select -->
    <div class="report-business-select">
      <!-- 人员绩效选择器 -->
      <personnel-performance-select v-if="reportType === 'personnel_performance'" ref="personnelPerformanceSelect" @updateData="update" @change-loading="changeLoading"/>
      <product-fault-select v-if="reportType === 'product_fault'" ref="productFaultSelect" @updateData="update" @change-loading="changeLoading"/>
      <mtbt-select v-if="reportType === 'mtbt'" ref="mtbtSelect" @updateData="update" @change-loading="changeLoading"/>
      <work-hours-select v-if="reportType === 'work_hours'" ref="workHoursSelect" @updateData="update" @change-loading="changeLoading"/>
      <service-type-select v-if="reportType === 'service_type'" ref="serviceTypeSelect" @updateData="update" @change-loading="changeLoading"/>
      <cost-stat-select v-if="reportType === 'cost_stat'" ref="costStatSelect" @updateData="update" @change-loading="changeLoading"/>
    </div>
    <!-- 图表 -->
    <personnel-performance-chart v-if="reportType === 'personnel_performance'" ref="personnelPerformanceChart" @change-type="changeType" @export="exportChart" :loading="loading" :export-loading="exportLoading"/>
    <product-fault-chart v-if="reportType === 'product_fault'" ref="productFaultChart" @change-type="changeType" @export="exportChart" :loading="loading" :export-loading="exportLoading"/>
    <mtbt-chart v-if="reportType === 'mtbt'" ref="mtbtChart" @export="exportChart" :loading="loading" :export-loading="exportLoading"/>
    <work-hours-chart v-if="reportType === 'work_hours'" ref="workHoursChart" @export="exportChart" :loading="loading" :export-loading="exportLoading"/>
    <service-type-chart v-if="reportType === 'service_type'" ref="serviceTypeChart" @export="exportChart" :loading="loading" :export-loading="exportLoading"/>
    <cost-stat-chart v-if="reportType === 'cost_stat'" ref="costStatChart" @export="exportChart" :loading="loading" :export-loading="exportLoading"/>

  </div>
</template>
<script>

// components
import PersonnelPerformanceSelect from './components/personnelPerformanceSelect'
import PersonnelPerformanceChart from './components/personnelPerformanceChart'

import ProductFaultSelect from './components/productFaultSelect'
import ProductFaultChart from './components/productFaultChart'

import MtbtSelect from './components/mtbtSelect'
import MtbtChart from './components/mtbtChart'

import WorkHoursSelect from './components/workHoursSelect'
import WorkHoursChart from './components/workHoursChart'
import serviceTypeSelect from './components/serviceTypeSelect'
import serviceTypeChart from './components/serviceTypeChart'

import CostStatSelect from './components/costStatSelect'
import CostStatChart from './components/costStatChart'
// API
import * as ReportApi from '@src/api/ReportApi.ts';

export default {
  name: 'system-view',
  data() {
    return {
      reportType: '', // 报表类型
      params: {}, // 
      taskCharts: [], // 图表数据
      loading:false,
      exportLoading:false
    }
  },
  mounted() {
    this.reportType = window.location.href.split('type=')[1]
  },
  methods:{
    headerText() {
      const { reportType } = this;
      const typeEnum = {
        'personnel_performance':this.$t('frameHeader.tabMap.personnelPerformance'),
        'product_fault':this.$t('frameHeader.tabMap.faultStatistics'),
        'mtbt':this.$t('report.mtbtSelect.MTBTReport'),
        'service_type':this.$t('report.serviceTypeSelect.reportName'),
        'work_hours':this.$t('report.workHoursChart.reportName'),
        'cost_stat':this.$t('report.costStatSelect.costStatistics'),
      }
      try{
        return typeEnum[reportType]
      }catch(error){
        console.warn('try catch error headerText', error)
        return ''
      }
    },
    update(data){
      switch(this.reportType){
      case 'personnel_performance':
        return this.$refs.personnelPerformanceChart.init(data.data, data.haveUsers);
      case 'product_fault':
        return this.$refs.productFaultChart.init(data.data, data.haveUsers);
      case 'mtbt':
        return this.$refs.mtbtChart.init(data.data, data.haveUsers);
      case 'work_hours':
        return this.$refs.workHoursChart.init(data.data, data.haveUsers);
      case 'service_type':
        return this.$refs.serviceTypeChart.init(data.data, data.haveUsers);
      case 'cost_stat':
        return this.$refs.costStatChart.init(data.data, data.haveUsers,);
      default:
        return
      }
    },
    changeType(type){
      switch(this.reportType){
      case 'personnel_performance':
        return this.$refs.personnelPerformanceSelect.changeType(type);
      case 'product_fault':
        return this.$refs.productFaultSelect.changeType(type);
      default:
        return
      }
    },
    exportChart(){
      switch(this.reportType){
      case 'personnel_performance':
        return this.$refs.personnelPerformanceSelect.export();
      case 'product_fault':
        return this.$refs.productFaultSelect.export();
      case 'mtbt':
        return this.$refs.mtbtSelect.export();
      case 'work_hours':
        return this.$refs.workHoursSelect.export();
      case 'cost_stat':
        return this.$refs.costStatSelect.export();
      case 'service_type':
        return this.$refs.serviceTypeSelect.export();
      default:
        return
      }
    },
    // 切换loading
    changeLoading({type, state}){
      if(type == 1)this.loading = state
      if(type == 2)this.exportLoading = state
    }
  },
  components: {
    [PersonnelPerformanceSelect.name]: PersonnelPerformanceSelect,
    [PersonnelPerformanceChart.name]: PersonnelPerformanceChart,
    [ProductFaultSelect.name]: ProductFaultSelect,
    [ProductFaultChart.name]: ProductFaultChart,
    [MtbtChart.name]: MtbtChart,
    [MtbtSelect.name]: MtbtSelect,
    [WorkHoursSelect.name]: WorkHoursSelect,
    [WorkHoursChart.name]: WorkHoursChart,
    [serviceTypeSelect.name]: serviceTypeSelect,
    [serviceTypeChart.name]: serviceTypeChart,
    [CostStatSelect.name]: CostStatSelect,
    [CostStatChart.name]: CostStatChart,
  }
}
</script>
<style lang="scss" scoped>
.report-business {
  padding: 12px;
  &-header, &-select {
    padding: 12px 12px 2px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 12px 0px rgba(50, 51, 51, 0.12);
  }
  &-select {
    margin-top: 12px;
  }
}
</style>
<style lang="scss">
.report-business{
  .base-select-container .base-select-main-content{
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #e0e1e2;
    border-radius: 4px;
    padding: 0 10px;
    min-height: 32px;
    line-height: 30px
  }
}
</style>